import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import setting from './modules/setting'

import '../hehe.js'

Vue.use(Vuex)

const store = new Vuex.Store({
  // state 中存放全局状态
  state: {
    count: 10,
  },
  getters: {
    doubleCount(state) {
      console.log(this, 'getter 函数的 this 是 undefined')
      return state.count * 2
    },
  },
  // mutations 是 Vuex 统一 管理和维护 状态变更的口子
  // 补充，注意：在 Vuex 中，只有 mutation 能修改 state
  mutations: {
    // changeToken() {
    //   console.log('根 store 的 changeToken')
    // },
    // state 当前 Vuex 所有的状态
    // payload 表示载荷，附加参数，由外界调用该 mutation 时传递进来
    addCount(state, number) {
      // console.log(this, 'mutation函数中的this')
      // mutation 中的 this 指向根 store 实例
      if (Array.isArray(number)) {
        state.count += number.reduce((sum, v) => sum + v, 0)
      } else {
        state.count += number
      }
      // return 'hehe' // mutation 的返回值无意义
    },
    setCount100(state) {
      state.count = 100
    },
  },
  actions: {
    addCountAsync(ctx, payload) {
      // console.log(this, 'action 的 this 也是 store 实例')
      // this 永远指向的是 根 store 实例，而 context 是当前上下文的 store 实例
      setTimeout(() => {
        ctx.commit('addCount', payload)
      }, 1000)

      return 123 // action 的返回值是异步处理逻辑成功的值
    },
  },

  // 模块和模块之间的状态 是 独立的
  modules: {
    user,
    setting,
  },
})

export default store
